<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>修改密码</title>
    <!--css style-->
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/font.css">
    <link rel="stylesheet" href="responsive/flexible.css">
    <script src="responsive/flexible.js"></script>
</head>
<body class="personal_center bind pwd">
    <header>
        <a href="javascript:void(0)" class="pre_page"></a>
        修改密码
    </header>

    <section class="main">
        <div class="container">

            <ol class="vip_ctr_header" type="1">
                <li><span>1</span><a href="javascript:void(0)">验证身份</a></li>
                <li class="active"><span>2</span><a href="javascript:void(0)">修正密码</a></li>
            </ol>
            <form action="" class="form_pwd">
                <h2>设置新密码</h2>
                <input type="password" id="password" name="password" onblur="checkEmpty(this,'设置您的密码')">
                <h2>确定新密码</h2>
                <input type="password" id="re_password" name="password">
                <input type="submit" value="下一步" onclick="checkInfo()">
            </form>
        </div>
    </section>


</body>
<script src="js/jquery.js"></script>
<script>
    var b_isPwdValid=false;
    $(function(){

        /*密码强度以及密码格式*/
        $('#password').keyup(function () {
            var $this=$(this);
            var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");//密码强
            var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");//密码中
            var enoughRegex = new RegExp("(?=.{6,}).*", "g");//密码弱
            var noSpaceRegex=new RegExp("^[^\\s]*$","g");//非空格
            var charRegex=new RegExp("^(?![\\d]+$)(?![a-zA-Z]+$)(?![!#$%^&\\\\\/\\|\\.@~\\+\\={}();,:''*]+$)[\\da-zA-Z!#$%^&\\\\\/\\|\\.@~\\+\\={}();,:''*]{6,20}$","g");//字母、数字及标点符号至少包含2种

            /*6-20个字符*/
            if($this.val().length>6&&$this.val().length<20){
                //$(".cryp_strength h6").eq(0).addClass("active");
                /*不包含空格*/
                if(noSpaceRegex.test($this.val())){
                    //$(".cryp_strength h6").eq(1).addClass("active");

                }else{
                    //$(".cryp_strength h6").eq(1).removeClass("active");
                }
                /*字母、数字及标点符号至少包含2种*/
                if(charRegex.test($this.val())){
                    //$(".cryp_strength h6").eq(2).addClass("active");
                }else{
                    //$(".cryp_strength h6").eq(2).removeClass("active");
                }
            }else{
                //$(".cryp_strength h6").removeClass("active");
            }

            /*只能包含字母、数字及标点符号（除空格）*/

            /*字母、数字及标点符号至少包含2种*/


            if (false == enoughRegex.test($(this).val())) {
                /*$("h5 i").removeClass('high');
                $("h5 i").removeClass('mid');
                $("h5 i").addClass('low');*/
                //密码小于六位的时候，密码强度图片都为灰色
            }
            else if (strongRegex.test($(this).val())) {
                //console.log("1111"+$(this).val());
                /*$("h5 i").removeClass('low');
                $("h5 i").removeClass('mid');
                $("h5 i").addClass('high');*/
                //密码为八位及以上并且字母数字特殊字符三项都包括,强度最强
            }
            else if (mediumRegex.test($(this).val())) {
                /*$("h5 i").removeClass('high');
                $("h5 i").removeClass('low');
                $("h5 i").addClass('mid');*/
                //密码为七位及以上并且字母、数字、特殊字符三项中有两项，强度是中等
            }
            else {
                /*$("h5 i").removeClass('high');
                $("h5 i").removeClass('mid');
                $("h5 i").addClass('low');*/
                //如果密码为6为及以下，就算字母、数字、特殊字符三项都包括，强度也是弱的
            }
            return true;
        });

        $("#password").blur(function(){
            if($("#re_password").val()!=''){
                if($("#password").val()!=$("#re_password").val()){
                    alert("两次密码不一致");
                    b_isPwdValid=false;
                }else{
                    b_isPwdValid=true;
                }
            }
        });
        $("#re_password").blur(function(){
            if($("#password").val()!=''){
                if($("#password").val()!=$("#re_password").val()){
                    alert("两次密码不一致");
                    b_isPwdValid=false;
                }else{
                    b_isPwdValid=true;
                }
            }
        });
    });
    /*检测是否为空*/
    function checkEmpty(obj,message){
        if(obj.value==''){
            alert(message);
            return true;
        }else{
            return false;
        }
    }
    function checkInfo(){
        if(!b_isPwdValid){
            alert("您的密码设置有误");
            $(".form_pwd").submit(false);
            return;
        }
    }

</script>
</html>